<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        :addPer="'station:create'"
        :selectPer="'station:page'"
        addTitle="新增工位"
        @insert="add"
        @search="search"
        :showSearchButton="true"
        :showAddButton="true"
      >
        <Job-shop clearable v-model="filters.storeId" placeholder="所属门店" />
        <el-select clearable v-model="filters.stationTypeDictId" placeholder="工位类型" style="width: 200px">
          <el-option
            v-for="item in dict['工位类型']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-input v-model="filters.teamName" clearable placeholder="小组名称" style="width: 200px" />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i class="el-icon-edit" title="编辑" style="cursor: pointer;" v-permission="'station:update'" @click="handleDataUpdateEdit(row)"></i>
          <i class="el-icon-delete" title="删除" style="color:red; margin-left: 20px;cursor: pointer" v-permission="'station:delete'" @click="handleDataDelete(row)"></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base';
import { dataList, changeStatus, dataDelete } from '@/api/after-sale/personnel/workstation';
import { getDict } from '@/utils'
export default {
  mixins: [
    baseMixin({
      findData: dataList,
      dataName: ['content', 'totalRecords'],
      // addData: addAdvert,
      deleteData: dataDelete,
      // isAdd: false,
      // findDataById:getAdvert,
      // updateData: updateAdvert,
      idName: 'id',
      format(res) {
        return res.map(data => {
          data.statusValue = data.status ? '正常' : '停用'
          return data
        })
      }
    })
  ],
  data() {
    return {
      filters: {
        storeId: '',
        stationTypeDictId: '',
        teamName: ''
      },
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '工位名称', value: 'stationName', type: 'text' },
        { name: '工位类别', value: 'stationTypeValue', type: 'text' },
        {
          name: '状态',
          value: 'statusValue',
          type: 'switch',
          valueId: 'status',
          action: (row) => {
            changeStatus(row.id).then((res) => {
              this.search()
            })
          },
        },
        { name: '备注', value: 'remark', type: 'text' }
      ],
      dict: [],
      types: [
        { id: '1', value: '测试收支种类1' },
        { id: '2', value: '测试收支种类2' }
      ]
    }
  },
  mounted() {
    this.dict = getDict(['工位类型'])
  },
  methods:{
    // 列表查询
    search(form){
      this.searchOptions = this.filters
      this.currentPage = 1
      this.setTableData()
    },
    add(){
      this.$router.push({ path: '/personnel/addWorkstation' })
    },
    handleDataUpdateEdit(row){
      this.$router.push({ path: '/personnel/eidtWorkstation', query: { id: row.id }})
    }
  }
}
</script>
